<template>
  <div>
    <div class="button-style1">
      <el-button type="warning" icon="el-icon-download" size="mini" @click="exportPDF">导出</el-button>
    </div>
    <!-- <button type="primary" @click="exportPDF">导出PDF</button> -->
    <div id="pdfHtml" ref="printHtml">
      <div class="collect">
        <div class="item">
          <div class="title">班结对账汇总</div>
          <div class="table">
            <el-table :show-header="false" :data="table1" border style="width: 100%; height: 100%"
              :cell-class-name="addclass">
              <el-table-column prop="title1" label="数值 2">
                <template slot-scope="scope">
                  <div style="width: 100%; height: 100%">
                    {{ scope.row.title1 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="amount1" label="数值 3"> </el-table-column>
              <el-table-column prop="title2" label="数值 2"> </el-table-column>
              <el-table-column prop="amount2" label="数值 3"> </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="item">
          <div class="title">消费-油品汇总</div>
          <div class="table">
            <el-table :data="queryGroupByOil" border style="width: 100%; height: 100%">
              <el-table-column prop="oil_name" label="油品名"> </el-table-column>
              <el-table-column prop="oil_price" label="油价-原价"> </el-table-column>
              <el-table-column prop="order_liters" label="加油数量(L/kg)"> </el-table-column>
              <el-table-column prop="receivable_amt" label="应收"> </el-table-column>
              <el-table-column prop="amt" label="实收"> </el-table-column>
              <el-table-column prop="discount_coupon_amt" label="优惠券优惠"> </el-table-column>
              <el-table-column prop="discount_amt" label="优惠"> </el-table-column>
              <!--<el-table-column prop="serviceCharge" label="手续费"> </el-table-column>-->
              <el-table-column prop="equipment_code" label="班结设备"> </el-table-column>

            </el-table>
          </div>
        </div>
        <div class="item">
          <div class="title">消费-油枪汇总</div>
          <div class="table">
            <el-table :data="queryGroupByOilGun" border style="width: 100%; height: 100%">
              <el-table-column prop="oil_gun" label="油枪"> </el-table-column>
              <el-table-column prop="oil_name" label="油品名"> </el-table-column>
              <el-table-column prop="oil_price" label="油价-单价"> </el-table-column>
              <el-table-column prop="order_liters" label="加油数量(L/kg)"> </el-table-column>
              <el-table-column prop="receivable_amt" label="应收"> </el-table-column>
              <el-table-column prop="amt" label="实收"> </el-table-column>
              <el-table-column prop="discount_coupon_amt" label="优惠券优惠金额"> </el-table-column>
              <el-table-column prop="discount_amt" label="优惠金额"> </el-table-column>
              <!--<el-table-column prop="serviceCharge" label="手续费"> </el-table-column>-->
            </el-table>
          </div>
        </div>
        <!--
    <div class="item">
      <div class="title">非油品汇总</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="合计金额"> </el-table-column>
          <el-table-column prop="q2" label="合计优惠"> </el-table-column>
          <el-table-column prop="q3" label="合计应收款"> </el-table-column>
        </el-table>
      </div>
    </div>
        -->
        <!-- <div class="item">
      <div class="title">员工加油汇总</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="员工"> </el-table-column>
          <el-table-column prop="q2" label="油品"> </el-table-column>
          <el-table-column prop="q3" label="油枪"> </el-table-column>
          <el-table-column prop="q4" label="加油量"> </el-table-column>
          <el-table-column prop="q5" label="分类应收款"> </el-table-column>
        </el-table>
      </div>
    </div> -->

        <div class="item">
          <div class="title">消费-支付方式汇总</div>
          <div class="table">
            <el-table :data="queryGroupByPayType" border style="width: 100%; height: 100%">
              <el-table-column prop="pay_type" label="支付方式"> </el-table-column>
              <el-table-column prop="amt" label="消费合计"> </el-table-column>
              <el-table-column prop="refund_amt" label="退款合计"> </el-table-column>
              <el-table-column prop="discount_amt" label="优惠合计"> </el-table-column>
              <el-table-column prop="discount_coupon_amt" label="优惠券优惠合计"> </el-table-column>
              <!--<el-table-column prop="serviceCharge" label="手续费"> </el-table-column>-->
              <!-- <el-table-column prop="sumPrice" label="加总合计"> </el-table-column> -->
            </el-table>
          </div>
        </div>



        <div class="item">
          <div class="title">消费-员工方式汇总</div>
          <div class="table">
            <el-table :data="queryGroupByEmployees" border style="width: 100%; height: 100%">
              <el-table-column prop="oil_personnel_name" label="账号"> </el-table-column>
              <el-table-column prop="receivable_amt" label="应收"> </el-table-column>
              <el-table-column prop="amt" label="实收"> </el-table-column>

              <el-table-column prop="oil_name" label="油品"> </el-table-column>

              <el-table-column prop="discount_amt" label="优惠"> </el-table-column>
              <el-table-column prop="discount_coupon_amt" label="优惠券优惠"> </el-table-column>
              <el-table-column prop="refund_amt" label="退款"> </el-table-column>
            </el-table>
          </div>
        </div>


        <!--
  <div class="item">
      <div class="title">消费-活动优惠汇总</div>
      <div class="table">
        <el-table :data="queryGroupByActivity" border style="width: 100%; height: 100%">
        <el-table-column prop="class_no" label="班结号"> </el-table-column>
        
          <el-table-column prop="q1" label="活动名称"> </el-table-column>
          
          <el-table-column prop="order_count" label="订单数量"> </el-table-column>
          <el-table-column prop="discount_amt" label="优惠金额"> </el-table-column>
        </el-table>
      </div>
    </div>
    -->


        <div class="item">
          <div class="title">充值-汇总</div>
          <div class="table">
            <el-table :data="cardSum" border style="width: 100%; height: 100%">
              <el-table-column prop="amt" label="金额"> </el-table-column>
              <el-table-column prop="orderCount" label="笔数"> </el-table-column>
            </el-table>
          </div>
        </div>
        <!--
    <div class="item">
      <div class="title">收款分类汇总</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="收款方式"> </el-table-column>
          <el-table-column prop="q2" label="实收合计"> </el-table-column>
          <el-table-column prop="q3" label="退款合计"> </el-table-column>
          <el-table-column prop="q4" label="优惠合计"> </el-table-column>
          <el-table-column prop="q5" label="加总合计"> </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="item">
      <div class="title">积分商城收款分类汇总</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="收款方式"> </el-table-column>
          <el-table-column prop="q2" label="实收合计"> </el-table-column>
          <el-table-column prop="q3" label="优惠合计"> </el-table-column>
          <el-table-column prop="q4" label="使用积分"> </el-table-column>
          <el-table-column prop="q5" label="订单合计"> </el-table-column>
        </el-table>
      </div>
    </div>
        
    <div class="item">
      <div class="title">自定义金额充值</div>
      <div class="table">
        <el-table :data="table2" border style="width: 100%; height: 100%">
          <el-table-column prop="q1" label="微信"> </el-table-column>
          <el-table-column prop="q2" label="支付宝"> </el-table-column>
          <el-table-column prop="q3" label="现金"> </el-table-column>
          <el-table-column prop="q4" label="使用积分"> </el-table-column>
          <el-table-column prop="q5" label="银行卡额"> </el-table-column>
        </el-table>
      </div>
    </div>
    -->
        <div class="last">
          <div>收银员：<span v-if="querySummaryByClassNo[0]">{{ querySummaryByClassNo[0].createName }}</span></div>
          <div>班结时间：
            <span v-if="querySummaryByClassNo[0]">{{ querySummaryByClassNo[0].classStartTime }}-</span>
            <span v-if="querySummaryByClassNo[0]">{{ querySummaryByClassNo[0].classEndTime }}</span>
          </div>
        </div>

        <div class="last">
          <el-tooltip placement="top">
            <div v-if="querySummaryByClassNo[0] && querySummaryByClassNo[0].note" style="max-width: 80vw;" v-html="ToBreak(querySummaryByClassNo[0].note)" slot="content"></div>
            <div class="oneLine">
              备注：<span v-if="querySummaryByClassNo[0]">{{ querySummaryByClassNo[0].note }}</span>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSettlementInfo } from "@/api/settlement"
import { getPdf } from '@/api/exportPdf';
export default {
  data() {
    return {
      querySummaryByClassNo: [],
      queryGroupByActivity: [],
      queryGroupByOil: [],
      queryGroupByOilGun: [],
      queryGroupByPayType: [],
      queryGroupByEmployees: [],
      cardSum: [],
      table1: [
        // {
        //   title1: "消费合计应收（不含充值）",
        //   amount1: "",
        //   title2: "短款：",
        //   amount2: "",
        // },
        // {
        //   title1: "消费合计实收（不含充值）：",
        //   amount1: "",
        //   title2: "优惠券合计金额：",
        //   amount2: "",
        // },
        // {
        //   title1: "充值实收合计金额：",
        //   amount1: "",
        //   title2: "立减合计金额：",
        //   amount2: "",
        // },
        // {
        //   title1: "客户退款合计金额：",
        //   amount1: "",
        //   title2: "回罐合计金额：",
        //   amount2: "",
        // }
        {
          title1: "消费合计应收：",
          amount1: "",
          title2: "消费合计实收：",
          amount2: "",
        },
        {
          title1: "优惠券合计金额：",
          amount1: "",
          title2: "充值实收合计金额：",
          amount2: "",
        },
        {
          title1: "客户退款合计金额：",
          amount1: "",
          title2: "立减合计金额：",
          amount2: "",
        },
        {
          title1: "提现总金额",
          amount1: ""
        }
      ],
      table2: [
        {
          q1: "11",
          q2: "12",
          q3: "13",
          q4: "14",
          q5: "15",
        },
      ],
    };
  },
  created() {
    getSettlementInfo({
      classNo: this.$route.query.classNo
    }).then((res) => {
      this.querySummaryByClassNo = res.data.querySummaryByClassNo
      this.queryGroupByActivity = res.data.queryGroupByActivity
      this.queryGroupByOil = res.data.queryGroupByOil
      this.queryGroupByOilGun = res.data.queryGroupByOilGun
      this.queryGroupByPayType = res.data.queryGroupByPayType
      this.queryGroupByEmployees = res.data.listDetail4User
      this.cardSum = [res.data.cardSum]

      this.table1[0].amount1 = this.querySummaryByClassNo[0].receivableAmt || 0 // 消费合计应收
      // this.table1[0].amount2 = this.querySummaryByClassNo[0].moreAmt || 0 // 短款
      this.table1[0].amount2 = this.querySummaryByClassNo[0].amt || 0 // 消费合计实收
      this.table1[1].amount1 = this.querySummaryByClassNo[0].discountCouponAmt || 0 // 优惠券合计金额
      this.table1[1].amount2 = this.querySummaryByClassNo[0].actualRechargeReceivedAmt || 0 // 充值实收合计金额
      this.table1[2].amount1 = this.querySummaryByClassNo[0].refundAmt || 0 // 客户退款合计金额
      this.table1[2].amount2 = this.querySummaryByClassNo[0].discountAmt || 0 // 立减合计金额
      this.table1[3].amount1 = this.querySummaryByClassNo[0].totalWithdrawalAmount || 0 // 提现总金额
      // this.table1[4].amount1 = this.querySummaryByClassNo[0].score || 0 // 消耗积分






      // 支付方式汇总
      const sumPayType = {};
      sumPayType.pay_type = "合计";
      // sumPayType.pay_type = res.data.querySummaryByClassNo.receivableAmt;   
      sumPayType.amt = res.data.querySummaryByClassNo[0].amt;
      sumPayType.refund_amt = res.data.querySummaryByClassNo[0].refundAmt;
      sumPayType.discount_amt = res.data.querySummaryByClassNo[0].discountAmt;
      sumPayType.serviceCharge = res.data.querySummaryByClassNo[0].serviceCharge;
      sumPayType.serviceCharge = res.data.querySummaryByClassNo[0].serviceCharge;
      sumPayType.sumPrice = res.data.querySummaryByClassNo[0].sumPrice;
      sumPayType.discount_coupon_amt = res.data.querySummaryByClassNo[0].discountCouponAmt;
      // console.log(sumPayType);

      this.queryGroupByPayType.push(sumPayType);


      // console.log('queryGroupByPayType',this.queryGroupByPayType)
      // console.log('querySummaryByClassNo',this.querySummaryByClassNo)
    })
  },
  methods: {
    ToBreak(val) {
      return val.replaceAll(',', '<br />')
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },
    exportPDF() {
      getPdf('班次信息', 'pdfHtml');
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(rowIndex, columnIndex);
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    addclass(row) {
      if (row.columnIndex % 2 === 0) return "cellcss";
    },
  },
};
</script>
<style lang="scss">
::v-deep .card-table {
  padding: 10px;
  margin-top: 20px;
  background-color: #f8f8f8;

  .el-button {
    margin: 0 5px 0 0;
  }
}

// 表格样式
::v-deep .el-form-item {
  margin-bottom: 0;

  .el-form-item__label {
    padding: 0;
    margin: 0;
    height: 29px;
    font-weight: 400;
    font-size: 12px;
  }

  .el-button--cyan {
    margin-left: 20px;
  }
}

::v-deep .el-table {
  border: 1px #f8f8f8 solid;
  border-bottom: 1px #dfe6ec solid;
}

::v-deep .is-center {
  border: 1px transparent solid;
  border-bottom: 1px #f8f8f8 solid;
}

.collect {
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;

  .item {
    margin-top: 10px;

    .title {
      text-align: center;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      font-weight: bold;
    }

  }

  .cellcss {
    background-color: #f6f6f6;
  }

  .last {
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
}

.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.button-style1 {
  padding: 0 20px;
  margin-top: 12px;
}
</style>